<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Calculator</title>
    <script src="vue.min.js"></script>
</head>

<body>
    <div class="calculator" id="app">
        <div class="result" style="grid-area: result;">{{equation}}</div>
        <button style="grid-area: ac;" @click="clear">AC</button>
        <button style="grid-area: cc;" @click="backspace">C</button>
        <button style="grid-area: plus-minus;" @click="calculateToggle">±</button>
        <button style="grid-area: percent;" @click="calculatePercentage">%</button>
        <button style="grid-area: add;" @click="append('+')">+</button>
        <button style="grid-area: subtract;" @click="append('-')">-</button>
        <button style="grid-area: multiply;" @click="append('×')">×</button>
        <button style="grid-area: divide;" @click="append('÷')">÷</button>
        <button style="grid-area: equal;" @click="calculate">=</button>

        <button style="grid-area: num-1;" @click="append(1)">1</button>
        <button style="grid-area: num-2;" @click="append(2)">2</button>
        <button style="grid-area: num-3;" @click="append(3)">3</button>
        <button style="grid-area: num-4;" @click="append(4)">4</button>
        <button style="grid-area: num-5;" @click="append(5)">5</button>
        <button style="grid-area: num-6;" @click="append(6)">6</button>
        <button style="grid-area: num-7;" @click="append(7)">7</button>
        <button style="grid-area: num-8;" @click="append(8)">8</button>
        <button style="grid-area: num-9;" @click="append(9)">9</button>
        <button style="grid-area: num-0;" @click="append(0)">0</button>

        <button style="grid-area: dot;" @click="append('.')">.</button>
    </div>
</body>
<style>
    body {
        -webkit-touch-callout: none;
        /* iOS Safari */
        -webkit-user-select: none;
        /* Chrome/Safari/Opera */
        -khtml-user-select: none;
        /* Konqueror */
        -moz-user-select: none;
        /* Firefox */
        -ms-user-select: none;
        /* Internet Explorer/Edge */
        user-select: none;
        /* Non-prefixed version, currently */

        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 0;
        min-height: 100vh;
        background-color: #eee;
    }

    .calculator {
        --button-width: 60px;

        display: grid;
        grid-template-areas:
            "result result result result"
            "ac cc percent plus-minus"
            "num-7 num-8 num-9 divide"
            "num-4 num-5 num-6 multiply"
            "num-1 num-2 num-3 subtract"
            "num-0 dot equal add";
        grid-template-columns: repeat(4, var(--button-width));
        grid-template-rows: repeat(6, var(--button-width));

        box-shadow: -8px -8px 16px -10px rgba(255, 255, 255, 1),
            8px 8px 16px -10px rgba(0, 0, 0, 0.2);
        padding: 16px;
        border-radius: 20px;
    }

    .calculator>button {
        margin: 6px;
        padding: 0;
        border: none;
        display: block;
        outline: none;
        border-radius: calc(var(--button-width)/2);
        font-size: 20px;
        font-family: Arial, Helvetica, sans-serif;
        color: #999;
        background: linear-gradient(135deg, rgba(220, 220, 220, 1) 0%, rgba(255, 255, 255, 1) 100%);
        box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1),
            4px 4px 10px -8px rgba(0, 0, 0, 0.3);
    }

    .calculator>button:active {
        box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1) inset,
            4px 4px 10px -8px rgba(0, 0, 0, 0.3) inset;
    }

    .result {
        text-align: right;
        line-height: var(--button-width);
        font-size: 36px;
        font-family: Arial, Helvetica, sans-serif;
        padding: 0 16px;
        color: #666;
    }
</style>
<script>
    new Vue({
        el: '#app',
        data: {
            equation: '0',
            isDecimalAdded: false,
            isOperatorAdded: false,
        },
        methods: {
            isOperator(char) {
                return ['+', '-', '×', '÷'].indexOf(char) > -1;
            },
            append(char) {
                if (this.equation.length >= 10) {
                    this.equation = "ERROR";
                    return;
                }
                if (this.equation == "ERROR") {
                    return;
                }
                // Start from 0
                if (this.equation === '0' && !this.isOperator(char)) {
                    if (char == '.') {
                        this.equation += '.';
                        this.isDecimalAdded = true;
                    } else {
                        this.equation = "" + char;
                    }
                    return;
                }
                // Add Number or Dot
                if (!this.isOperator(char)) {
                    if (char === '.' && this.isDecimalAdded == false) {
                        this.isDecimalAdded = true;
                        this.isOperatorAdded = true;
                    } else {
                        this.isOperatorAdded = false;
                    }
                    this.equation += char;
                }
                // Add Operator
                if (this.isOperator(char) && !this.isOperatorAdded) {
                    this.equation += char;
                    this.isDecimalAdded = false;
                    this.isOperatorAdded = true;
                }

            },
            calculate() {
                if (this.equation == "ERROR") {
                    this.clear();
                    return;
                }
                try {
                    result = this.equation.replace(new RegExp('×', 'g'), '*')
                        .replace(new RegExp('÷', 'g'), '/')
                        .replace(new RegExp('%', 'g'), '*0.01')
                    this.equation = parseFloat(eval(result).toFixed(9)).toString();
                    this.isOperatorAdded = false;
                    this.isDecimalAdded = false;
                } catch {
                    this.equation = "ERROR";
                }

            },
            calculateToggle() {
                if (this.isOperatorAdded) {
                    return;
                }
                this.calculate();
                this.equation += "*-1";
                this.calculate();
            },
            calculatePercentage() {
                if (this.isOperatorAdded) {
                    return;
                }
                this.calculate();
                this.equation += '*100';
                this.calculate();
                if (this.equation != "ERROR") {
                    this.equation += '%';
                }
            },
            clear() {
                this.equation = '0';
                this.isDecimalAdded = false;
                this.isOperatorAdded = false;
            },
            backspace() {
                if (this.equation == "ERROR") {
                    this.clear();
                    return;
                }
                if (this.equation.length <= 1) {
                    this.equation = '0';
                } else {
                    this.equation = this.equation.substring(0, this.equation.length - 1);
                }

                if (this.equation == '-') {
                    this.clear();
                }
            }
        }
    })
</script>

</html>